<template>
  <div class="infinite-container" style="background:#f2f2f2;">
    <ul class="feedback-list" v-if="list.length > 0">
      <li v-for="(item, i) in list" :key="i">
        <div class="item-createTime">
          <img src="../../assets/feedback_icon_message@2x.png" alt width="16" class="v-middle" />
          {{item.createTime}} &nbsp; {{classifyObj[item.classify]}}
        </div>
        <div class="item-content">{{item.content}}</div>
        <div class="item-images">
          <a :href="v" v-for="(v, j) in item.images" :key="j">
            <img :src="v" class="img" />
          </a>
        </div>
        <div class="feedback" v-show="item.replyContent">
          <div class="replyTime">{{item.replyTime}}</div>
          <div class="replyContent">管理员回复：{{item.replyContent}}</div>
        </div>
      </li>
    </ul>
    <div class="not-found" v-else>
      <div>暂无反馈</div>
    </div>
  </div>
</template>

<script>
import { commonAjaxJson, RESTFUL_API } from "@/api/api";

export default {
  data() {
    return {
      list: [],
      classifyObj: {
        "01": "意见建议",
        "02": "问题反馈",
        "03": "其他"
      }
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    getList() {
      this.params = {};
      
      commonAjaxJson(RESTFUL_API.popBaseFeedback, this.params, true).then(
        res => {
          
          if (res.data.data && res.data.data.length > 0) {
            res.data.data.forEach(v => {
              if (v.avatar) {
                v.images = v.avatar.split(",");
              } else {
                v.images = [];
              }
            });
          }
          this.list = res.data.data;
        }
      );
    }
  }
};
</script>

<style lang="less" scoped>
.feedback-list {
  li {
    margin-bottom: 10px;
    background: #fff;
    .item-createTime,
    .replyTime {
      font-size: 12px;
      color: #999;
      padding: 10px;
    }
    .item-content {
      padding: 0 10px;
    }
    .item-images {
      padding: 10px;
    }
    .feedback {
      border-top: 1px solid #f2f2f2;
    }
    .img {
      width: 100px;
      height: 100px;
      margin-right: 10px;
    }
    .replyTime {
      padding: 10px 20px;
    }
    .replyContent {
      padding: 0 20px 10px;
      color: red;
    }
  }
}
</style>